<template>
  <a-row class="index_right_bottom panel_box">
    <div class="rankingFacilities">
      <div class="title">碳排行设施名称</div>

      <a-dropdown>
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="1"> <a-icon type="user" />近三个月</a-menu-item>
          <a-menu-item key="2"> <a-icon type="user" />近六个月</a-menu-item>
          <a-menu-item key="3"> <a-icon type="user" />近一年</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          近一年 <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>

    <a-col :span="24">
      <a-table    rowKey="id" :columns="columns" :data-source="data" :pagination="pagination">
        <a slot="name" slot-scope="text, record, index">
          <span v-if="index == 0" class="medal medal1">{{ index + 1 }}</span>
          <span v-else-if="index == 1" class="medal medal2">
            {{ index + 1 }}</span
          >
          <span v-else-if="index == 2" class="medal medal3">{{
            index + 1
          }}</span>
          <span v-else class="medal">{{ index + 1 }}</span></a
        >
        <span slot="customTitle"><a-icon type="stock" /> 排名</span>
        <span slot="consumption" slot-scope="consumption">
          {{ consumption.toFixed(2) }}
        </span>
        <span slot="trend" slot-scope="consumption">
          <a-tag :color="consumption > 504 ? 'volcano' : 'geekblue'">
            <a-icon type="rise" v-if="consumption > 504" />
            <a-icon type="fall" v-else />
          </a-tag>
        </span>
      </a-table>
    </a-col>
  </a-row>
</template>

<script>
const columns = [
  {
    dataIndex: "name",
    key: "name",
    align: "right",
    sorter: true,
    slots: { title: "customTitle" },
    scopedSlots: { customRender: "name" },
  },
  {
    title: "排放设施",

    filters: [
      { text: "发电设施", value: "发电设施" },
      { text: "其他设施", value: "其他设施" },
    ],
    dataIndex: "facilityName",
    key: "facilityName",
  },
  {
    title: "碳消耗量",

    sorter: true,
    dataIndex: "consumption",
    key: "consumption",
    scopedSlots: { customRender: "consumption" },
  },
  {
    title: "更新日期",
    key: "createTime",
    dataIndex: "createTime",
  },

  {
    title: "态势",
    key: "trend",
    dataIndex: "trend",
    scopedSlots: { customRender: "trend" },
  },
];
import { getFacilityRanking } from "@/api/api.js";
export default {
  name: "RankingFacility",
  data() {
    return {
      pagination: false,
      data: null,
      columns,
    };
  },
  mounted() {
    getFacilityRanking().then((res) => {
      //   console.log(res);
      this.data = res.result.reverse();
    });
  },
  methods: {
    handleMenuClick() {},
  },
};
</script>

<style lang="scss" >
.ant-table-tbody .ant-table-row td {
  padding: 12px 8px;
}
.title {
  display: flex;
  font-size: 14px;
  font-weight: 600;
}
.panel_box {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
}
.index_right_bottom {
  margin-bottom: 5px;
  .medal {
    // display: inline-block;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #fff;
    background: #b3b3b3;
    margin-right: 6px;
  }
  .medal1 {
    background: #ebc469;
  }
  .medal2 {
    background: #b8b6a9;
  }
  .medal3 {
    background: #bd8a77;
  }
  .rankingFacilities {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
</style>